<template>
    <div class="content-box">
      <div ref="searchBox" class="search-box flex" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="100px"
        >
        <el-form-item label="关联公司" prop="companyIds" >
            <el-select
             v-model="queryParams.companyIds"
             multiple
             collapse-tags
             clearable
             filterable
             placeholder="请选择"
             style="width: 240px; margin-right: 20px"
            >
              <el-option
               v-for="(item, index) in companyIdOption"
               :key="index"
               :label="item.companyName"
               :value="item.id"
               ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="管理人" prop="manageUserIds">
            <el-select
              v-model="queryParams.manageUserIds"
              multiple
              collapse-tags
              clearable
              filterable
              placeholder="请选择管理人"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in manageOptionList"
                :key="index"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="接单状态" prop="orderStatus">
           <el-select
             v-model="queryParams.orderStatus"
             clearable
             filterable
             placeholder="请选择"
             style="width: 240px; margin-right: 20px"
             :disabled="viewsOptionState"
           >
             <el-option
               v-for="(item, index) in orderStatusOption"
               :key="index"
               :label="item.label"
               :value="item.value"
             ></el-option>
           </el-select>
        </el-form-item>
        <el-form-item 
           label="关联产品"
           prop="productIds" style="flex: 1;">
           <el-select
            v-model="queryParams.productIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
           >
             <el-option
              v-for="(item, index) in productIdsOption"
              :key="index"
              :label="item.productName"
              :value="item.id"
              ></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="账号类型" prop="roleType">
           <el-select
             v-model="queryParams.roleType"
             clearable
             filterable
             placeholder="请选择"
             style="width: 240px; margin-right: 20px"
           >
             <el-option
               v-for="(item, index) in queryRoleTypeOption"
               :key="index"
               :label="item.label"
               :value="item.value"
             ></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="账号状态" prop="status">
            <el-select
              v-model="queryParams.status"
              clearable
              filterable
              placeholder="请选择"
              style="width: 240px; margin-right: 20px"
            >
              <el-option
                v-for="(item, index) in statusOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              plain
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
            <el-button
              type="primary"
              size="mini"
              v-hasPermi="['userPermissions:downUserLogin:add']"
              @click="handelDialog('添加', null)"
              >添加账号</el-button
            >
          </el-form-item>
        </el-form>
      </div>
  
      <div class="table-box">
        <el-row :gutter="10" class="mb8">
          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="handleQuery"
            :columns="columns"
          ></right-toolbar>
        </el-row>
        <el-table
          v-sticky-header
          ref="table"
          v-loading="loading"
          :data="dataList"
        >
          <template v-for="item in columns.slice(0, columns.length - 1)">
            <el-table-column
              :key="item.key"
              :label="item.label"
              :prop="item.prop"
              :width="getColumnWidth(item.key)"
              align="center"
              :fixed="item.fixed"
              :sortable="item.sortable ? item.sortable : false"
              :show-overflow-tooltip="item.showTooltip"
              v-if="item.visible"
            >
              <template slot-scope="scope">
                <!--账号状态单独处理 -->
                <div v-if="item.key == 4" @click="showOrOffPopo(scope.row)">
                    <el-popover
                       placement="top"
                       trigger="click"
                       :value ="rowIndex === scope.row.id"
                       title="状态操作"
                       >
                       <el-form >
                         <el-form-item label="状态项">
                           <el-radio-group v-removeAriaHidden v-model="accountStatus" >
                             <el-radio 
                              v-for="(item,index) in statusOption" 
                             :key="index" :label="item.value">{{ item.label }}
                           </el-radio>
                          </el-radio-group>
                         </el-form-item>
                         <el-form-item style="display: flex;justify-content: center;">
                           <el-button type="primary" @click="clickSubmitEditState(scope.row)">提交</el-button>
                           <el-button @click="clickCancelState(scope.row)">取消</el-button>
                         </el-form-item>
                       </el-form>
                       <el-button 
                          slot="reference"
                          :type="statusColor(scope.row[item.prop])" 
                          size="mini" 
                        >{{ ArrayFormatObj(statusOption)[scope.row[item.prop]]}}</el-button>
                    </el-popover> 
                </div>
                <!--接单状态单独处理 -->
                <div v-else-if="item.key == 5">
                  <el-popconfirm
                    :title="`确定重新${
                      !scope.row[item.prop] ? '接单' : '不接单'
                    }吗？`"
                    @confirm="changeOrderStatus(scope.row)"
                  >
                    <el-button
                      slot="reference"
                      :type="scope.row[item.prop] ? 'success' : 'info'"
                      size="mini"
                      >{{ scope.row[item.prop] ? "接单" : "不接单" }}</el-button
                    >
                  </el-popconfirm>
                </div>
                <!-- 账号角色类型单独处理 -->
                <div v-else-if="item.key == 7">
                  {{ ArrayFormatObj(queryRoleTypeOption)[scope.row[item.prop]]}}
                </div>
                <span v-else>
                  {{ scope.row[item.prop] }}
                </span>
              </template>
            </el-table-column>
          </template>
          <el-table-column
            fixed="right"
            :prop="columns[columns.length - 1].prop"
            :label="columns[columns.length - 1].label"
            align="center"
            :width="getColumnWidth(columns.length - 1)"
            v-if="columns[columns.length - 1].visible"
          >
            <template slot-scope="scope">
             <div :class="['flex-center',device === 'mobile'?'flex':'']">
              <el-button
                type="text"
                v-hasPermi="['userPermissions:downUserLogin:query']"
                @click="handelDialog('查看', scope.row)"
                :style="{marginLeft: device === 'mobile'?'10px':'0px'}"
                >查看</el-button
              >
              <el-button
                type="text"
                v-hasPermi="['userPermissions:downUserLogin:edit']"
                @click="handelDialog('编辑', scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                title="确定要删除该账号吗？"
                style="margin-left: 10px"
                @cancel="hanCancelDel"
                @confirm="handelDel(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  v-hasPermi="['userPermissions:downUserLogin:remove']"
                  ><span style="color: #ff116e">删除</span></el-button
                >
              </el-popconfirm>
             </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 使用分页插件 -->
        <pagination
          v-show="total > 0"
          :total="total"
          :page-sizes="[10, 50, 100, 200, 500]"
          :page.sync="queryParams.pageIndex"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 新增/编辑/查看 对话框 -->
      <el-dialog
        :title="title"
        width="800px"
        :visible.sync="dialogShow"
        :before-close="handleClose"
      >
        <el-form :model="form" :rules="rules" label-width="140px" ref="formRef">
          <el-form-item label="姓名" prop="userName">
            <el-input
              v-model="form.userName"
              style="width: 100%"
              placeholder="请输入"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="登录账号" prop="account">
            <el-input
              v-model="form.account"
              style="width: 100%"
              placeholder="请输入"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form.password"
              style="width: 100%"
              placeholder="请输入"
              clearable
              :disabled="viewsOptionState"
            />
          </el-form-item>
          <el-form-item
           v-if="isAdd"
           label="公司" prop="companyId" >
              <el-select
               v-model="form.companyId"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="!isAdd"
              >
                <el-option
                 v-for="(item, index) in companyIdOption"
                 :key="index"
                 :label="item.companyName"
                 :value="item.id"
                 ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
             v-else
             label="公司名称" prop="companyName">
            <el-input
              v-model="form.companyName"
              style="width: 100%"
              placeholder="请输入"
              clearable
              :disabled="!isAdd"
            />
          </el-form-item>
            <el-form-item label="接单状态" prop="orderStatus">
               <el-select
                 v-model="form.orderStatus"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="viewsOptionState"
               >
                 <el-option
                   v-for="(item, index) in orderStatusOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
           </el-form-item>
           <el-form-item 
              v-if="isAdd"
              label="关联产品"
              prop="productIds" style="flex: 1;">
              <el-select
               v-model="form.productIds"
               multiple
               collapse-tags
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="!isAdd"
              >
                <el-option
                 v-for="(item, index) in productIdsOption"
                 :key="index"
                 :label="item.productName"
                 :value="item.id"
                 ></el-option>
              </el-select>
         </el-form-item>
         <el-form-item
         v-else
         label="关联产品名称" prop="productName">
            <el-input
              v-model="form.productName"
              style="width: 100%"
              placeholder="请输入"
              clearable
              :disabled="!isAdd"
            />
          </el-form-item>
         <el-form-item label="账号类型" prop="roleType">
            <el-select
              v-model="form.roleType"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="(!isAdd && rowObj.roleType === 0 ) || viewsOptionState"
            >
              <el-option
                v-for="(item, index) in queryRoleTypeOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账号状态" prop="status">
            <el-select
              v-model="form.status"
              clearable
              filterable
              placeholder="请选择"
              style="width: 100%"
              :disabled="!isAdd"
            >
              <el-option
                v-for="(item, index) in statusOption"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" v-if="!viewsOptionState">
          <el-button type="primary" @click="handleSubmit('formRef')"
            >确 定</el-button
          >
          <el-button @click="handleClose">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import tableStickyMixins from "@/mixins/tableStickyMixins";
  import { mapGetters } from "vuex";
  import { getDwnCompanyList } from '@/api/business/downCompanyManagement'
  import { getDownProductList } from "@/api/business/productManagement";
  import { querySysUserManageList } from "@/api/system/userManage";

  import {
    listDownCompany,
    addOrEditDownCompany,
    delDownCompany,
    updateStatus,
    updateOrderStatus
  } from "@/api/userPermissions/downUserLogin";
  import moment from "moment";
  
  export default {
    // 定义名字用于标识该组件是否被keep-alive缓存
    name: "DownUserLogin",
    data() {
      return {
        // 数据列表
        dataList: [],
        // 关联公司筛选项
        companyIdOption: [],
        // 管理人筛选项
        manageOptionList: [],
        // 产品列表筛选项
        productIdsOption:[],
        // 接单状态筛选项
        orderStatusOption: [
          { label: "不接单", value: 0 },
          { label: "接单", value: 1 },
        ],
        // 查询时账号类型筛选项
        queryRoleTypeOption: [
          { label: "超管", value: 0 },
          { label: "管理员", value: 1 },
          { label: "接线员", value: 2 },
        ],
        // 账号状态筛选项
        statusOption: [
          { label: "启动", value: 0 },
          { label: "停用", value: 1 },
          { label: "暂停", value: 2 },
        ],
        // 总条数
        total: 0,
        // 查询参数
        queryParams: {
          pageIndex: 1,
          pageSize: 10,
        },
        loading: false,
        // 表格列信息
        columns: [
        {key: 0,label: `姓名`,prop: "userName",visible: true,pcWidth: 140,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 1,label: `登录账号`,prop: "account",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 2,label: `公司编码`,prop: "companyCode",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 3,label: `关联公司名称`,prop: "companyName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 4,label: `账号状态`,prop: "status",visible: true,pcWidth: 150,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 5,label: `接单状态`,prop: "orderStatus",visible: true,pcWidth: 150,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 6,label: `关联产品名称`,prop: "productName",visible: true,pcWidth: 200,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 7,label: `账号角色类型`,prop: "roleType",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 8,label: `公司管理人`,prop: "manageUserName",visible: true,pcWidth: 130,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 9,label: `添加时间`,prop: "createTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,},
        {key: 10,label: `操作`,prop: "operation",visible: true,pcWidth: 120,mobileWidth: 80,fixed: "right",showTooltip: true},
        ],
        // 临时状态变量
        tempStatus:null,
        // 当前激活项行数
        rowIndex:null,
        // 账号状态
        accountStatus:null,


        // 显示搜索栏
        showSearch: true,
        // 弹框标题
        title: "",
        // 弹框显示状态
        dialogShow: false,
        // 弹框的表单信息
        form: {},
        // 弹框表单校验规则
        rules: {
            userName:[
            { required: true, message: "请填写姓名", trigger: "blur" },
            ],
            account:[
              { required: true, message: "请填写登录账号", trigger: "blur" },
            ],
            companyId:[
              { required: true, message: "请选择公司", trigger: "change" },
            ],
            roleType:[
              { required: true, message: "请选择账号类型", trigger: "change" },
            ]
        },
        // 回显对象
        rowObj:{}
        
      };
    },
    mixins: [tableStickyMixins],
    watch: {
      columns: {
        handler() {
          // 清空popover激活项索引
          this.rowIndex = null
          this.updateTableHeight();
        },
        deep: true,
      },
      dataList:{
        handler() {
          // 清空popover激活项索引
          this.rowIndex = null
        },
        deep: true,
      },
    },
    created() {
      this.init();
      this.getManageList();
      this.getProductList();
      this.getcompanyIdList();
    },
    computed: {
      ...mapGetters(["sidebar", "device"]),
       // 对状态进行处理
    statusColor:()=>{
        return (state)=>{
           switch(state){
             case 0:
                return 'success';
             case 1:
                return 'info';
             case 2:
                return 'danger';
             default:
           }
        }
     },
     // 将数组转换为对象形式
    ArrayFormatObj:()=>{
        return (arr)=>{
          return arr.reduce((pre, cur)=>{
            pre[cur.value] = cur.label;
            return pre;
          },{})
        }
     },
      // 计算当前列元素在所处环境的宽度
      getColumnWidth() {
        return (index) => {
          return this.isMobile
            ? this.columns[index].mobileWidth
            : this?.sidebar?.opened
            ? this.columns[index].pcWidth - this.slightWidth
            : this.columns[index].pcWidth + 17;
        };
      },
      // 是否新增操作
      isAdd() {
        return this.title === "添加账号";
      },
      // (是否处于查看操作禁用表单项)
      viewsOptionState() {
        return this.title === "查看账号";
      },
    },
    methods: {
      // 获取管理人列表
      getManageList() {
        querySysUserManageList().then((res) => {
           this.manageOptionList = res?.data;
        });
      },
      // 获取关联公司列表
      getcompanyIdList() {
        getDwnCompanyList().then((res) => {
           this.companyIdOption = res.data;
        });
      },
      // 获取产品筛选项列表
      getProductList(){
        // 获取下游产品列表
        getDownProductList().then((res) => {
           this.productIdsOption = res.data;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.$set(this.queryParams, "pageIndex", 1);
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // 完全重置到初始状态
        this.$set(this, "queryParams", {
          pageIndex: 1,
          pageSize: 10,
        });
        this.init();
      },
      init() {
        this.getList();
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        listDownCompany(this.queryParams).then((response) => {
          // 解决id为number类型精度丢失问题
          this.dataList = response?.data?.list.map((row) => {
            return {
              ...row,
              id: row.id.toString(),
            };
          });
          this.total = response?.data?.total;
          this.loading = false;
        }).catch((err) => {
          setTimeout(() => {// 延迟2s后自动取消加载状态
            this.loading = false;
          }, 2000);
        })
      },
      // 获取公司详情
      getDownUserLoginDetail(row) {
        console.log(row);
        
        // 回显表单数据
        this.form = JSON.parse(JSON.stringify(row))
        
      },
     // 显示操作状态弹出窗回调
      showOrOffPopo(row) {
        // 设置接单状态
        this.accountStatus = row?.status
        // 设置索引打开弹窗
        this.rowIndex = row?.id
        // 设置临时变量
        this.tempStatus = row?.status;       
      },
      // 启用/停用状态切换触发回调
      changeEnabledState(row) {
        const params = {
          id: row?.id,
          status: row?.status ? 0 : 1,
        };
        updateStatus(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        });
      },
       // 点击提交修改状态
       clickSubmitEditState(row) {
         const params = {
           id: row?.id,
           status:this.accountStatus,
         };
         if(this.accountStatus===this.tempStatus){
           return this.$message.error(`账号已${this.ArrayFormatObj(this?.statusOption)[row?.status]},请勿重复操作！`);
         }
         updateStatus(params).then((res) => {
           if(res.code === 200){
             this.$message.success("操作成功");
             this.getList();
             this.rowIndex = null;
           }
         });
       },
       // 点击取消改变账号状态
       clickCancelState(row){
         row.status = this.tempStatus
         this.$message.info("取消操作");
         this.rowIndex = null;
      },
      // 接单状态切换触发回调
      changeOrderStatus(row){
        const params = {
          id: row?.id,
          orderStatus: row?.orderStatus ? 0 : 1,
        };
        updateOrderStatus(params).then((res) => {
          if (res.code === 200) {
            this.$message.success("操作成功");
            this.getList();
          }
        });
      },

  
      // 修改表格高度触发回调
      updateTableHeight() {
        this.$nextTick(() => {
          this.$refs.table.doLayout();
        });
      },
      // 处理对话框
      handelDialog(title, row = null) {
        this.title = title + "账号";
        // 回显对象
        this.$set(this,'rowObj',row)
        switch (title) {
          case "查看":
            // 回显数据
            this.getDownUserLoginDetail(row);
            break;
          case "添加":
            break;
          case "编辑":
            // 回显数据
            this.getDownUserLoginDetail(row);
            break;
          default:
          // 其他操作
        }
        this.dialogShow = true;
      },
      /*关闭弹窗*/
      handleClose() {
        this.$refs["formRef"].resetFields();
        this.form = this.$options.data().form;
        this.dialogShow = false;
      },
      // 取消删除
      hanCancelDel() {
        this.$message({
          type: "info",
          message: "已取消删除操作",
        });
      },
      // 删除列表项
      handelDel(row) {
        delDownCompany(row?.id).then((res) => {
          if (res.code === 200) {
            this.$message.success("删除成功");
            this.getList();
          }
        });
      },
      // 刷新数据且关闭弹框
      handleRefresh() {
        // 刷新数据
        this.getList();
        // 关闭弹窗
        this.handleClose();
      },
      /*提交操作*/
      handleSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = {};
            params = JSON.parse(JSON.stringify(this.form));
            console.log(params);
            // 判断当前所处操作
            switch (this.title) {
              case "添加账号":
                // 添加操作
                addOrEditDownCompany(params).then((res) => {
                  if (res.code === 200) {
                    this.$message.success("添加成功");
                    this.handleRefresh();
                  }
                });
                break;
              case "编辑账号":
                // 编辑操作
                addOrEditDownCompany(params).then((res) => {
                  if (res.code === 200) {
                    this.$message.success("编辑成功");
                    this.handleRefresh();
                  }
                });
                break;
              default:
              // 其他操作
            }
          }
        });
      },
    },
  };
  </script>
  
  <style scoped lang="scss">
  .title {
    font-size: 20px;
    color: #333333;
    font-weight: 500;
  }
  .search-box {
    margin: 0 0 20px;
    padding: 20px 20px 0;
    background: #fff;
    align-items: flex-start;
    border-radius: 6px;
  }
  .search-area {
    position: absolute;
    right: 20px;
  }
  .el-form-item__content {
    flex: 1;
    line-height: 40px;
    position: relative;
    font-size: 14px;
    min-width: 0;
  }
  ::v-deep .el-dialog__body {
    border-top: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
  }
  .el-table {
    // 滚动条加粗
    --scrollbar-height: 9px;
  }
  </style>
  